<script setup lang="ts">
import { useRouter } from 'vue-router';
import { Card } from "ant-design-vue";
import { ArrowRightOutlined, EyeOutlined, FireFilled } from "@ant-design/icons-vue";
import { onMounted, ref } from 'vue'
import { getIcon } from "@/api/assets/assets";

// 使用解构赋值来获取props
const { title, description, range, organizer, showDetail } = defineProps({
  title: String,
  description: String,
  range: String,
  organizer: String,
  awardName: String,
  showDetail: Boolean,
});
const image = ref<string | undefined>(undefined)
const fetchIcon = async () => {
  try {
    const data = await getIcon(['ai+x.png']);
    image.value = data['ai+x.png'];
  }
  catch (error) {
    console.error('API 调用错误:', error);
  }
};

onMounted(() => {
  fetchIcon();
});

const router = useRouter();

const signUpUrl = import.meta.env.VITE_SIGNUP_URL

const routerGo = (path: string) => {
  router.push(path);
};

const gotoSignUp = () => {
  window.open(signUpUrl, '_blank')
}
</script>

<template>
  <Card>
    <div class="flex gap-2 font-sans">
      <!-- 左侧图片 -->
      <img
        :src="image"
        alt="image"
        class="w-[200px] object-cover"
      >

      <!-- 右侧内容 -->
      <div class="flex-1 flex flex-col justify-between text-[#101010]">
        <!-- 标题和状态 -->
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-normal m-0">
            {{ title }}
          </h3>
          <span class="text-[#e1251b] text-lg flex items-center gap-1">
            <FireFilled />
            <span>火热进行中</span>
          </span>
        </div>

        <!-- 描述 -->
        <div class="text-lg">
          <p class="m-0">
            {{ description }}
          </p>
        </div>

        <!-- 底部信息和按钮 -->
        <div class="flex items-center justify-between">
          <!-- 举办方信息 -->
          <div class="flex items-center gap-2 text-sm text-gray-500">
            <span>{{ range }}</span>
            <span class="flex items-center">
              <label class="m-0">举办方：</label>
              <span>{{ organizer }}</span>
            </span>
          </div>

          <!-- 操作按钮 -->
          <div class="flex items-center gap-8">
            <a-button
              type="default"
              class="secondary-btn"
              style="font-size: 14px;border: none;"
              @click="gotoSignUp"
            >
              立即报名
              <template #icon>
                <ArrowRightOutlined />
              </template>
            </a-button>
            <a-button
              v-if="showDetail"
              type="primary"
              style="font-size: 14px;"
              @click="routerGo('/user/training')"
            >
              查看详情
              <template #icon>
                <EyeOutlined />
              </template>
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<style scoped lang="scss">
@use '@/style/custom-theme.scss' as *;

.secondary-btn {
  color: $button-secondary-text-color !important;
  background-color: $button-secondary-bg !important;
}
</style>
